<!DOCTYPE html>
<html>
<head>
<title>评分组件</title>
<script src="./vue.js"></script>
<style>
</style>
</head>
<body>
	<div id="app">
 <!-- 对于input v-model 等于  :value="scoreOut"   @input="value=args"-->
  当前评分: 
  <input  type="number" min="0" max="5" v-model="scoreOut" style="height:30px ;width: 100px ">  
  {{scoreOut}} 
  <br/>
  <br/>
		
    实现方式1： <my-star :score="scoreOut" @change-score="onChangeScore1111"></my-star>
     <br/>
    
    
    
    <!--用v-model 实现   默认调用 scoreOut=n 
    
    :score="scoreOut" @change-score="scoreOut=args" , scoreOut={score=n}
    
    -->
    实现方式2: <my-star1  v-model="scoreOut" ></my-star1>
    



	</div>
	
	
	<template id="starTempalte">
	 <div>
	   <template v-for="n in startNo"><!-- n是1,2,3,4,5 -->
	   <!-- 满 star-fill-->
       <svg v-if="n<=score"  @click="changeScore(n)" style="color: red;width: 80px;height: 80px" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-star-fill" viewBox="0 0 16 16">
          <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.283.95l-3.523 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
       </svg>
	   <!-- 空 -->
       <svg v-else     @click="changeScore(n)"  style="width: 80px;height: 80px" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-star" viewBox="0 0 16 16">
          <path d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256 4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73 3.523-3.356c.329-.314.158-.888-.283-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356-.83 4.73zm4.905-2.767l-3.686 1.894.694-3.957a.565.565 0 0 0-.163-.505L1.71 6.745l4.052-.576a.525.525 0 0 0 .393-.288l1.847-3.658 1.846 3.658a.525.525 0 0 0 .393.288l4.052.575-2.906 2.77a.564.564 0 0 0-.163.506l.694 3.957-3.686-1.894a.503.503 0 0 0-.461 0z"/>
       </svg>
       </template>
     </div>
	
	</template>
	
	
	
	
	
<script>

    //实现方法1
    const starComp= {
            template     :'#starTempalte' ,
            props:["score"],
            
            data :function(){
                return {
                   startNo:5 
                }
            },
            methods:{
                changeScore:function(n){
                    this.$emit("change-score",{score:n}); //<=============注意这里
                }
            }
    }
    
  //实现方法2
    const starComp1= {
            template     :'#starTempalte' ,
            
            
            props:["score"],
            model: {
                prop: 'score',
                event: 'change-score'
            },
            
            
            data :function(){
                return {
                   startNo:5 
                }
            },
            methods:{
                changeScore:function(n){
                    this.$emit("change-score",n);//<=============注意这里,只能返回简单值
                }
            }
    }
    
    

    
    
	 Vue.component("my-star",starComp);
	 Vue.component("my-star1",starComp1);
	 
     new Vue({
            el : "#app",
            data : {
                scoreOut:3
                
            },
            methods:{
                onChangeScore1111:function(args){
                    console.log(args);
                    this.scoreOut=args.score;
                }
                
            },
            
            components : {

            }
     });
</script>
</body>
</html>
